<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="../css/style.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
		</style>
		<script src="../js/angular/angular.min.js"></script>
		<script src="../js/angular/angular-resource.js"></script>
		<script src="../js/angular/common.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/common.js"></script>
		<script src="../js/service/messageService.js"></script>
	</head>

	<body ng-app="mainApp" ng-controller="messageListCtrl" >
		<header class="mui-bar mui-bar-nav mui-bar-detail">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
			<h1 class="mui-title">消息列表</h1>
		</header>
		<div class="mui-content ">
			<!-- 主界面具体展示内容 -->
			<ul id="OA_task_1" class="mui-table-view message" >
				<li class="mui-table-view-cell" ng-repeat="msg in messageList" >
					<div class="mui-slider-right mui-disabled">
						<a class="mui-btn mui-btn-red" ng-click="deleteTalk(msg)">删除</a>
					</div>
					<div class="mui-slider-handle mui-table" ng-click="messageTalkListBtn(msg)">

						<div class="mui-table-cell mui-col-xs-9">
							<div class="name_short ">{{msg.realName|subStr:2}} </div>
							<div class="message_con">
								<h4 class="mui-ellipsis">{{msg.realName}} </h4>
								<p class="mui-h6 mui-ellipsis" style="height: 21px;" ng-if="msg.lastMessage.type=='text'">{{msg.lastMessage.content}}</p>
								<p class="mui-h6 mui-ellipsis" style="height: 21px;" ng-if="msg.lastMessage.type=='msg'">[图片]</p>
							</div>
						</div>
						<div class="mui-table-cell mui-col-xs-3 mui-text-right">
							<p class="mui-h5">{{msg.lastMessage.publishTime|timeStr}}</p>
							<span class="mui-badge mui-badge-danger" ng-if="msg.count!=0">{{msg.count}}</span>
							<i class="icon"></i>
						</div>

					</div>
				</li>
			</ul>

		</div>
		
		
		<script>
			mui.init({
				swipeBack: false,
				pullRefresh: {
					container: '#pullrefresh',
				}
				
			});
			mui('.bottomPopover').popover('toggle'); //show hide toggle
			var msgtime;
			
			mainApp.controller('messageListCtrl', function($scope, $http,messageService) {
				mui.plusReady(function(){
					//修改底部角标数据
					var updateTalkCount=function(){
						var target = plus.webview.getWebviewById('webviewMain');
						target.evalJS("changeTalkCount()");//修改底部角标数据
					}
					var getList = function(){
						if(plus.webview.currentWebview().id=="msg"){
							//请求消息列表数据
							messageService.getMessageList(function(data){
								$scope.messageList = data.data;
								updateTalkCount();//修改角标数据
							}, error);
						}
						
					};
					//初始化列表数据
					getList();
					$scope.messageTalkListBtn=function(msg){
						msg.count=0;
						mui.openWindow({
							url:"customService.html",
							id:'customService'+new Date().getMilliseconds(),
						    extras:{
						        token:msg.token,
						        cusName:msg.realName,
						        receiveUser:msg.publishUser
						    },
						    styles: {
								popGesture:"close"	
							}
						});
					}
					$scope.deleteTalk=function(msg){
						messageService.deleteTalk(msg.token,function(data){
							angular.forEach($scope.messageList, function (m,index) {
				                if (m.token==msg.token) {
				                	$scope.messageList.splice(index,1);
				                }
				            });
						},error);
					}
					msgtime=setInterval(getList,10000);
					
				});
				
			});
			function deleteMsgTime(){	
				clearInterval(msgtime);
			}
			
			
		</script>
	</body>
</html>